<template>
  <div>
    <el-button type="primary" @click="showDialog('insert')">新增</el-button>
    <el-table :data="tableData" stripe border style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="content" label="病程内容" sortable  min-width="200">
        <template slot-scope="scope">
         <div v-html="scope.row.content" :ref="'print'+scope.row.id" class='p-3'></div>
        </template>
      </el-table-column>
      <el-table-column prop="writeTime" label="录入时间" sortable  width="120"></el-table-column>
      <el-table-column prop="creatorName" label="创建人" sortable  width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建日期" sortable  width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  width="120">
        <template slot-scope="scope">
          <el-button  @click="showDialog('update',scope.row)" type="text" size="small">编辑</el-button>
          <el-button  @click="showDialog('delete',scope.row)" type="text" size="small">删除</el-button>
          <el-button   type="text" size="small" @click="print('print'+scope.row.id)">打印</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="1000" top="10px" :close-on-click-modal="false" class="">
      <el-form :model="dialog.formdata" label-width="120px" class="demo-ruleForm">
        <el-form-item label="病程内容" prop="content">
          <VueUeditorWrap v-model="dialog.formdata.content" :config="config"></VueUeditorWrap>
        </el-form-item>
        <el-form-item label="病程录入时间" prop="writeTime">
          <el-date-picker v-model="dialog.formdata.writeTime"  type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="请输入病程录入时间" class="width220"/>
        </el-form-item>
        <el-form-item label="创建人" prop="creatorName" v-if="dialog.type==='update'">
          <el-input :rows="2" placeholder="请输入创建人" v-model="dialog.formdata.creatorName" class="width220" disabled/>
        </el-form-item>
        <el-form-item label="创建日期" prop="allergyHistory" v-if="dialog.type==='update'">
          <el-input  :rows="2" placeholder="请输入创建日期" v-model="dialog.formdata.createTime" class="width220" disabled/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div >
      <div ></div>
    </div>
  </div>
</template>
<script>
import {diseaseCourseList,insertUpdateDiseaseCourse,deletediseaseCourse} from "plugins/axios/inquiryRecord.js";
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  props:{
    hid:[String,Number],
  },
  components:{
    VueUeditorWrap
  },
  computed: {},
  data() {
    return {
      loading:false,
      tableData:[],
      dialog:{
        formdata:{},
        open:false,
        type:null,
        title:''
      },
    config: {
        autoHeightEnabled: false,
        initialFrameHeight: 500,
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        autoFloatEnabled: true,　　//是否工具栏可浮动
        initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        BaseUrl: '',
        serverUrl: `${process.env.VUE_APP_API_HOST}/mh/ueditor/config`,
        // serverUrl: `http://192.168.0.83:8891/mh/ueditor/config`,
        
        UEDITOR_HOME_URL: '/ueditor/'
      },
      printContent:''
    }
  },
  created() {},
  mounted(){},
  methods: {
    getDataList(){
      let self= this;
      self.loading =true;
      diseaseCourseList(self.hid).then(res=>{
        self.loading =false;
        self.tableData=res.content
      },error=>{
         self.loading =false;
      })
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type = type;
      self.dialog.title = `${type==='insert'?'新增':'修改'}病程`
      if(type==='delete'){
         self.$confirm('是否删除?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            confirmButtonClass:'bg-warning noBorder',
            type: 'warning'
          }).then(() => {
             deletediseaseCourse(row.id).then(res=>{
                    self.getDataList();
                })
            }).catch(()=> {});
      }else{
       self.dialog.formdata=type==='insert'?{pid:self.hid}:{...row}
       self.dialog.open=true;
      }
     
    },
    submitForm(){
      let self=this;
      insertUpdateDiseaseCourse(self.dialog.type,self.dialog.formdata).then(res=>{
        self.$message(`${self.dialog.title}成功`)
        self.dialog.open=false;
        self.getDataList();
      });
    },
    print(dom){
      // this.printContent=row.content
      this.$print(this.$refs[dom])
    }
  }
};
</script>
<style lang="stylus" scoped>
</style>